<template>
  <div class="borders"></div>
  <div
    class="recommend"
    v-for="(listPages, index) in listPage"
    :key="index"
    :style="
      index % 2 == 0
        ? 'background-color: #fff;'
        : 'background-color: rgb(235,235,235);'
    "
    @click="jumpDetails(index)">
    <div class="one" style="color: "><img :src="listPages.coverUrl" /></div>
    <div class="two">{{ listPages.name }}</div>
    <div class="three">{{ listPages.radio.name }}</div>
    <div class="four">播放量{{ listPages.listenerCount }}</div>
    <div class="five">攒{{ listPages.likedCount }}</div>
    <div class="six">{{ listPages.radio.category }}</div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import axios from "@/request"
import $store from "@/store/index";
import $router from "@/router/index";

// 提取数据
const listPage = ref([])
onMounted(() => {
  axios.get("/program/recommend").then((res) => {
    listPage.value = res.data.programs
  })
})

//转跳详情

function jumpDetails(index) {
  // console.log(listPage.value[index].id);
  $store.dispatch("jumpDetails", listPage.value[index].id);
  // console.log($store.state.id);
  $router.push({ path: "/detailsRadio" });
}
</script>

<style scoped>
.borders {
  width: 850px;
  border-bottom: 2px solid red;
}
.recommend {
  width: 850px;
  height: 80px;
  display: flex;
  justify-content: space-around;
}
.recommend .one {
  width: 50px;
  height: 70px;
}
.recommend .one img {
  width: 50px;
  height: 70px;
}
.recommend .two {
  width: 350px;
  height: 70px;
  line-height: 70px;
  /*强制文字在一行文本框内*/
  white-space: nowrap;
  /*溢出部分文字隐藏*/
  overflow: hidden;
  /*溢出部分省略号处理*/
  text-overflow: ellipsis;
}
.recommend .three {
  width: 150px;
  height: 70px;
  line-height: 70px;
  /*强制文字在一行文本框内*/
  white-space: nowrap;
  /*溢出部分文字隐藏*/
  overflow: hidden;
  /*溢出部分省略号处理*/
  text-overflow: ellipsis;
}
.recommend .four {
  width: 100px;
  height: 70px;
  line-height: 70px;
}
.recommend .five {
  width: 50px;
  height: 70px;
  line-height: 70px;
}
.recommend .six {
  width: 80px;
  height: 70px;
  line-height: 70px;
}
</style>
